<template style="width: 100%">
    <div>
        <div style="margin: 3% 5% 0 5%">
            <el-button @click="refresh" icon="el-icon-refresh" type="primary" style="float:right;margin-right: 20px">
                刷新
            </el-button>
            <el-button @click="newFolder" icon="el-icon-folder-add" type="primary"
                       style="float:right;margin-right: 20px ;">新建文件夹
            </el-button>
            <el-button @click="upload" icon="el-icon-upload2" type="primary" style="float:right;margin-right: 20px">上传
            </el-button>
            <el-button type="text" @click="backUp">返回上一级 | {{currentPath}}</el-button>
            <div style="height: 100%;max-height: 700px;">
                <el-table :data="tableData" height="430px" style="margin-top: 2%;width: 80%;margin-left: 10%;">
                    <el-table-column
                            prop="Type"
                            width="70"
                            align="center">
                        <template slot-scope="scope">
                            <div @click="toNextLevel(scope.$index,scope.row)">
                                <el-button style="border: 0"
                                           v-show="scope.row.Type=='Directory'"
                                           class="fa fa-folder fa-2x"></el-button>
                                <el-button style="border: 0;margin-left: 0"
                                           v-show="scope.row.Type=='File'" class="fa fa-file fa-2x"></el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            class="fileName"
                            prop="Name"
                            label="文件名"
                            width="380">
                        <template slot-scope="scope">
                            <el-button @click="toNextLevel(scope.$index,scope.row)"
                                       style="border: 0;padding-left: 0">
                                {{scope.row.Name}}
                            </el-button>
                            <!--<el-input style="width: 200px" size="small"></el-input>-->
                        </template>
                    </el-table-column>
                    <el-table-column width="fit-content" align="center " label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.Type !=='Directory'&& scope.row.Name.substring(scope.row.Name.length-5).indexOf('.tiff')==-1"
                                    :disabled="scope.row.Name.substring(scope.row.Name.length-4).indexOf('.shp')==-1 &&scope.row.Name.substring(scope.row.Name.length-4).indexOf('.csv')==-1 && scope.row.Name.substring(scope.row.Name.length-4).indexOf('.')!==-1 && scope.row.Name.substring(scope.row.Name.length-4).indexOf('.txt')==-1 || scope.row.Name.substring(scope.row.Name.length-4).indexOf('_S')!==-1"
                                    title="预览"
                                    icon="fa fa-table"
                                    @click="previewFile(scope.$index,scope.row)"
                                    type="text">
                                <!--<i class="el-icon-delete-solid"></i>-->
                            </el-button>
                            <el-button
                                    v-if="scope.row.Type !=='Directory'&& scope.row.Name.substring(scope.row.Name.length-5).indexOf('.tiff')==-1"
                                    :disabled="scope.row.Name.substring(scope.row.Name.length-4).indexOf('.csv')==-1 && scope.row.Name.substring(scope.row.Name.length-4).indexOf('.shp')==-1"
                                    title="空间化"
                                    icon="fa fa-connectdevelop"
                                    @click="spatialFile(scope.$index,scope.row)"
                                    type="text">
                                <!--<i class="el-icon-delete-solid"></i>-->
                            </el-button>
                            <el-button
                                    :disabled="scope.row.Type=='Directory'"
                                    title="下载"
                                    icon="el-icon-download"
                                    @click="downloadFile(scope.$index,scope.row)"
                                    type="text">
                            </el-button>
                            <el-button
                                    title="删除"
                                    icon="fa fa-trash"
                                    @click="deleteFile(scope.$index,scope.row)"
                                    type="text">
                                <!--<i class="el-icon-delete-solid"></i>-->
                            </el-button>
                            <el-button
                                    v-if="scope.row.Name.substring(scope.row.Name.length-5).indexOf('.tiff')!=-1"
                                    title="瓦片服务"
                                    icon="fa fa-server"
                                    @click="tiffService(scope.$index,scope.row)"
                                    type="text">
                                <!--<i class="el-icon-delete-solid"></i>-->
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="Size"
                            label="文件大小"
                            width="200"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="Date"
                            label="日期"
                            align="center"
                            width="150">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <upload-data-dialog @refreshCurrentTable="refresh"></upload-data-dialog>
        <new-folder-dialog v-bind:currentPath="currentPath" @refreshCurrentTable="refresh"></new-folder-dialog>
        <data-preview-dialog></data-preview-dialog>
        <spatial-dialog></spatial-dialog>
        <tiff-service-dialog></tiff-service-dialog>
    </div>
</template>
<script>
    import uploadDataDialog from "./uploadDataDialog.vue"
    import newFolderDialog from "./newFolderDialog.vue"
    import dataPreviewDialog from "./dataPreviewDialog.vue"
    import spatialDialog from "./spatiaDialog.vue"
    import tiffServiceDialog from "./tiffServiceDialog"

    export default {
        components: {
            uploadDataDialog,
            newFolderDialog,
            dataPreviewDialog,
            spatialDialog,
            tiffServiceDialog
        },
        data() {
            return {
                tableData: [],
                currentPath: '',
            };
        },
        methods: {
            spatialFile(index, row) {
                let that = this;
                this.$Bus.$emit('spatialVisible', {
                    // url: "",
                    fileName: row.Name,
                    path: that.currentPath + "/" + row.Name,
                    visible: true,
                })
            },
            tiffService(index, row) {
                let that = this;
                this.$Bus.$emit('tiffServiceVisible', {
                    // url: "",
                    fileName: row.Name,
                    path: that.currentPath + "/" + row.Name,
                    visible: true,
                })
            },
            previewFile(index, row) {
                let that = this;
                this.$Bus.$emit('dataPreviewDialogParams', {
                    title: row.Name,
                    visible: true,
                    queryUrl: that.currentPath + "/" + row.Name,
                    queryParams: null
                })
            },
            downloadFile(index, row) {
                let path = this.currentPath + "/" + row.Name;
                // let url = "http://localhost:9000/dbfg/userself/download?path=";
                window.open(this.$URL.fileDownloadUrl + path, 'blank');
            },
            deleteFile(index, row) {
                let that = this;
                let filePath = this.currentPath + "/" + row.Name;
                this.$confirm('是否删除该文件？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // let url = "http://192.168.1.5:9400/dbfg/userSpace/delete?path=";
                    this.$axios.get(this.$URL.fileDeleteUrl + filePath)
                        .then(function (res) {
                            if (res.code === 200) {
                                that.$message({
                                    message: '文件删除成功',
                                    type: 'success'
                                });
                                that.tableData = [];
                                that.refresh();
                            } else {
                                that.$message({
                                    message: '文件删除失败',
                                    type: 'warning'
                                });
                            }
                        }).catch(function (error) {
                        console.log(error)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            backUp() {
                let that = this;
                let index = this.currentPath.lastIndexOf("\/");
                this.currentPath = this.currentPath.substring(0, index);
                // let url = "http://192.168.1.5:9400/dbfg/userSpace/all?path=";
                this.$axios.get(this.$URL.fileGetUrl + this.currentPath)
                    .then(function (res) {
                        if (res.code == 200) {
                            that.tableData = [];
                            that.tableData = res.body;
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            },
            upload() {
                let uploadDialogVisible = {
                    visible: true,
                };
                this.$Bus.$emit("uploadDialogVisible", uploadDialogVisible);
            },
            newFolder() {
                let newFolderDialogVisible = {
                    visible: true,
                    path: this.currentPath
                };
                this.$Bus.$emit('newFolderDialogVisible', newFolderDialogVisible);
            },
            //获取目录下的文件
            getFile() {
                let that = this;
                // let url = "http://192.168.1.5:9400/dbfg/userSpace/all?path=";
                let path = "/";
                this.$axios.get(this.$URL.fileGetUrl + path)
                    .then(function (res) {
                        if (res.code === 200) {
                            that.tableData = res.body;
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            },
            toNextLevel(index, row) {
                if (row.Type == "File") {

                } else {
                    let that = this;
                    this.currentPath += "/" + row.Name;
                    // let url = "http://localhost:9400/dbfg/userSpace/all?path=";
                    this.$axios.get(this.$URL.fileGetUrl + this.currentPath)
                        .then(function (res) {
                            if (res.code == 200) {
                                that.tableData = [];
                                that.tableData = res.body;
                            } else {
                                that.$message({
                                    message: '数据获取失败',
                                    type: 'warning'
                                });
                            }
                        });
                }
            },
            refresh() {
                let that = this;
                // let url = "http://localhost:9400/dbfg/userSpace/all?path=";
                this.$axios.get(this.$URL.fileGetUrl + this.currentPath)
                    .then(function (res) {
                        console.log(res);
                        if (res.code == 200) {
                            that.tableData = [];
                            that.tableData = res.body;
                        }
                    })
            },
        },
        created() {
            this.getFile();
        }
    };
</script>

<style scoped>

</style>
